<template>
  <div class="exp_tree_container">
    <el-tree
      ref="tree2"
      :data="data"
      :props="defaultProps"
      class="filter_tree"
      draggable
      :expand-on-click-node="false"
      default-expand-all
    >
      <span class="custom_tree_node" slot-scope="{ node, data }">
        <el-popover
          :offset="10"
          placement="top-start"
          width="100"
          trigger="hover"
        >
          <ul class="action_ul">
            <li @click="() => appendBrother(node, data)">添加同级</li>
            <li @click="() => append(data)">添加下级</li>
            <li @click="() => edit(data)">编辑</li>
            <li @click="() => remove(node, data)">删除</li>
          </ul>
          <i slot="reference" class="el-icon-tickets" />
        </el-popover>
        <span :title="data.label" class="tree_label" v-if="!data.flag">{{
          data.label
        }}</span>
        <el-input
          @blur="changeInfo(data)"
          v-if="data.flag"
          class="tree_input"
          v-model="data.label"
        />
      </span>
    </el-tree>
  </div>
</template>

<script>
/*
 *@author: liujinming
 *@description:  OA系统内的机构树状图组件
 *@modifyContent: 需要在原有组件基础上增加的可编辑的功能
 *@date: 2020-05-19 16:26:22
 */
let id = 1000;
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: "Level one 1",
          flag: false,
          children: [
            {
              id: 4,
              label: "Level two 1-1",
              flag: false,
              children: [
                {
                  id: 9,
                  flag: false,
                  label: "Level three 1-1-1"
                },
                {
                  id: 10,
                  flag: false,
                  label: "Level three 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          flag: false,
          label: "Level one 2",
          children: [
            {
              id: 5,
              flag: false,
              label: "Level two 2-1"
            },
            {
              id: 6,
              flag: false,
              label: "Level two 2-2"
            }
          ]
        },
        {
          id: 3,
          flag: false,
          label: "Level one 3",
          children: [
            {
              id: 7,
              flag: false,
              label: "Level two 3-1"
            },
            {
              id: 8,
              flag: false,
              label: "Level two 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    edit(data) {
      data.flag = true;
    },
    changeInfo(data) {
      data.flag = false;
    },
    /*
     *@author: liujinming
     *@date: 2020-05-26 09:18:32
     *@params1: 该实例是数据
     *@description: 添加同级数据
     *@returns : no return
     */
    appendBrother(node, data) {
      let arr = node.parent.data;
      const newChild = {
        id: id++,
        label: `testtest${id}`,
        flag: true,
        children: []
      };
      if (Array.isArray(arr)) {
        arr.push(newChild);
        this.data = arr;
      } else {
        arr.children.push(newChild);
      }
    },
    /*
     *@author: liujinming
     *@date: 2020-05-26 09:18:32
     *@params1: 该实例是数据
     *@description: 添加子级数据
     *@returns : no return
     */
    append(data) {
      const newChild = {
        id: id++,
        label: "testtest",
        flag: true,
        children: []
      };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    }
  }
};
</script>
<style lang="scss" scoped>
.exp_tree_container {
  display: inline-block;
}
.tree_input {
  width: 100px;
}

.tree_label {
  display: inline-block;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.action_ul {
  padding-left: 0px;
  margin: 0px;
  li {
    list-style: none;
    cursor: pointer;
    height: 34px;
    line-height: 34px;
  }
  li:hover {
    background: #f5f7fa;
  }
}
</style>
